<template>
  <div class="wrapper">
    <custom-chart width="100%" height="100%" ref="customChart"></custom-chart>
  </div>
</template>

<script>
import CustomChart from "@/components/chart/Chart.vue";
export default {
  components: { CustomChart },
  props: {},
  data() {
    return {
      options: {},
    };
  },
  created() {},
  mounted() {
    this.initHandle();
  },
  activated() {},
  updated() {},
  methods: {
    initHandle() {
      this.options = {
        xAxis: {
          type: "category",
          // type: "value",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // data: [100,200,300,400,500,600,700],
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: [
            "矩形",
            "一组图元",
            "圆",
            "圆环",
            "扇形",
            "圆弧",
            "多边形",
            "折线",
            "直线",
          ],
          orient: "vertical",
          right: 10,
          top: 10,
        },
        series: [
          // 矩形
          {
            type: "custom",
            coordinateSystem: "none",
            name: "矩形",
            renderItem: (params, api) => {
              return {
                type: "rect",
                shape: {
                  x: 100,
                  y: 20,
                  width: 100,
                  height: 100,
                },
                transition: "shape",
                style: api.style(),
              };
            },
            encode: {
              // x: [1], // 表示维度 3、1、5 映射到 x 轴。
              // y: [2,3],
            },
            data: [
              [12, 44, 55, 66, 2],
              [23, 6, 16, 23, 1],
              [23, 6, 16, 23, 1],
            ],
            // data:[100,200,300]
          },
          // 一组图元
          {
            type: "custom",
            coordinateSystem: "none",
            name: "一组图元",
            renderItem: (params, api) => {
              return {
                type: "group",
                // 如果 diffChildrenByName 设为 true，则会使用 child.name 进行 diff，
                // 从而能有更好的过度动画，但是降低性能。缺省为 false。
                // diffChildrenByName: true,
                children: [
                  {
                    type: "circle",
                    shape: {
                      cx: 100,
                      cy: 100,
                      r: 10,
                    },
                    style: api.style(),
                  },
                  {
                    type: "line",
                    shape: {
                      x1: 400,
                      y1: 100,
                      x2: 600,
                      y2: 200,
                    },
                    style: {
                      stroke: "#000",
                    },
                  },
                ],
              };
            },
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          // 圆
          {
            type: "custom",
            coordinateSystem: "none",
            name: "圆",
            renderItem: (params, api) => {
              return {
                type: "circle",
                shape: {
                  cx: 400,
                  cy: 200,
                  r: 20,
                },
                style: {
                  fill:"pink",
                  stroke:"pink"
                },
              };
            },
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          // 圆环
          {
            type: "custom",
            coordinateSystem: "none",
            name: "圆环",
            renderItem: (params, api) => {
              return {
                type: "ring",
                shape: {
                  cx: 400,
                  cy: 60,
                  r: 30,
                  r0: 50,
                },
                style: api.style(),
                textConfig: {},
              };
            },
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          // 扇形
          {
            type: "custom",
            coordinateSystem: "none",
            name: "扇形",
            renderItem: (params, api) => {
              return {
                type: "sector",
                shape: {
                  cx: 300,
                  cy: 120,
                  r: 30,
                  r0: 60,
                  startAngle: 0,
                  endAngle: Math.PI,
                },
                textContent: {
                  type: "text",
                },
                textConfig: {},
                style: api.style(),
              };
            },
            data: [1, 2, 3],
          },
          //  圆弧
          {
            type: "custom",
            coordinateSystem: "none",
            name: "圆弧",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: 130,
                  cy: 300,
                  r: 30,
                  r0: 600,
                  startAngle: 0,
                  endAngle: (Math.PI * 200) / 180,
                },
                style: {
                  fill: "red",
                  stroke: "#fff",
                  lineWidth: 1,
                  shadowBlur: 3,
                  shadowOffsetX: 3,
                  shadowOffsetY: 3,
                  shadowColor: "ccc",
                },
              };
            },
            data: [0],
          },
          // 多边形
          {
            type: "custom",
            coordinateSystem: "none",
            name: "多边形",
            renderItem: (params, api) => {
              return {
                type: "polygon",
                shape: {
                  points: [
                    [210, 220],
                    [220, 230],
                    [230, 240],
                    [240, 200],
                  ],
                  smooth: true,
                },
                style: api.style(),
              };
            },
            data: [2, 3, 4, 5],
          },
          // 折线
          {
            type: "custom",
            coordinateSystem: "none",
            name: "折线",
            renderItem: (params, api) => {
              return {
                type: "polyline",
                shape: {
                  points: [
                    [200, 354],
                    [400, 150],
                    [550, 350],
                    [650, 250],
                  ],
                },
                style: {
                  fill: "#fff",
                  stroke: "blue",
                },
              };
            },
            data: [12, 12, 12],
          },
          // 直线
          {
            type: "custom",
            coordinateSystem: "none",
            name: "直线",
            renderItem: (params, api) => {
              return {
                type: "line",
                shape: {
                  x1: 100,
                  y1: 100,
                  x2: 200,
                  y2: 200,
                },
                style: {
                  stroke: "orange",
                },
              };
            },
            data: [3],
          },
        ],
      };
      this.$refs.customChart.initChart(this.options);
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 810px;
  height: 500px;
  border: 10px solid rosybrown;
  margin: 0 auto;
}
</style>
